<template>
    <a-card :bordered="false">
        <a-col :span="5">
            <CategoryTree :type="4" :hasOper="true" @selected="onSelected"></CategoryTree>
        </a-col>
        <a-col :span="19" v-show="true">
            <ZkList ref="table" rowKey="id" :type="2" :searchs="list.searchs" :columns="list.columns" :data="list.loadData" @saveSortInput="saveSortInput">
                <template #operBtns>
                    <div v-if="categoryId">
                        <a-button type="primary" icon="plus" @click="handleEdit()">新增</a-button>
                    </div>
                </template>
                <template #status="record">
                    <a-switch checked-children="启用" un-checked-children="停用" :checked="record.status==BaseStatusEnum.ENABLE" @click="switchStatus(record)" />
                </template>
                <template #action="record">
                    <span>
                        <zk-btn @click="handleDetail(record)" icon="eye">查看</zk-btn>
                        <a-divider type="vertical" />
                        <zk-btn @click="handleEdit(record)" icon="edit">修改</zk-btn>
                        <a-divider type="vertical" />
                        <zk-btn @click="handleDel(record)" icon="delete">删除</zk-btn>
                    </span>
                </template>
            </ZkList>
        </a-col>
        <EditVue ref="edit"></EditVue>
        <DetailVue ref="detail"></DetailVue>
    </a-card>
</template>

<script>
    import { InputTypeEnum } from '@/appBase/enum';
    import ZkList from '@/appBase/ZkList.vue';
    import { queryResFileList } from '@/api/demo';
    import { getStatusOpts } from '../common/service/base';
    import EditVue from './TreeEdit.vue';
    import DetailVue from './TreeDetail.vue';
    import { BaseStatusEnum } from '../common/enum/enum';
    import CategoryTree from '@/modules/common/components/CategoryTree.vue';
    export default {
        name: "ResourcesPoolList",
        components: {
            ZkList,
            EditVue,
            DetailVue,
            CategoryTree
        },
        data() {
            return {
                BaseStatusEnum,
                categoryId: null,
                list: {
                    // 查询
                    searchs: [
                        { title: "资源名称", dataIndex: 'title' },
                        { title: "资源标签", dataIndex: 'tags' },
                        { title: "资源状态", dataIndex: 'status', type: InputTypeEnum.SELECT, options: () => getStatusOpts(1), value: 'null' },
                        { title: "开始时间", dataIndex: 'beginTime', type: InputTypeEnum.DATE_TIME },
                        { title: "结束时间", dataIndex: 'endTime', type: InputTypeEnum.DATE_TIME },
                    ],
                    // 表头
                    columns: [
                        { title: '排序', dataIndex: "sortNo", width: '150px', isSortInput: true },
                        { title: "资源名称", dataIndex: "title", width: '150px', maxLength: 10 },
                        { title: "资源标签", dataIndex: "tags" },
                        { title: "资源状态", scopedSlots: { customRender: "status" }, width: '100px' },
                        { title: "访问次数", dataIndex: "viewNum" },
                        { title: "发布时间", dataIndex: "createdTime", width: '150px', format: true },
                        { title: "功能列", scopedSlots: { customRender: "action" }, width: '180px', fixed: 'right' }
                    ],
                    // 加载数据方法 必须为 Promise 对象
                    loadData: async (queryParams, parameter) => {
                        queryParams.categoryId = this.categoryId == 0 ? null : this.categoryId;
                        return await queryResFileList(queryParams, parameter).then((result) => {
                            result.data = result.data.map(i => {
                                const fileSize = parseFloat(i.fileSize) / 1024 / 1024;
                                i.fileSizeStr = `${fileSize.toFixed(4)}`;
                                i.tags = i.tags?i.tags.replace(/\|/g,' | '):'';
                                return i;
                            });
                            return result
                        });
                    }
                }
            };
        },
        methods: {
            handleDetail(item) {
                this.$refs.detail.show({
                    id: item.id
                });
            },

            handleEdit(item) {
                if (item) {
                    this.$refs.edit.show({
                        id: item.id,
                        categoryId: this.categoryId,
                        onOk: () => {
                            this.$refs.table.refresh(false);
                        }
                    });
                } else {
                    this.$refs.edit.show({
                        categoryId: this.categoryId,
                        onOk: () => {
                            this.$refs.table.refresh(true);
                        }
                    });
                }
            },


            handleDel(item) {
                this.$confirm({
                    title: '提示',
                    content: `确定要删除当前资源？`,
                    onOk: async () => {
                        await delResFile({ id: item.id });
                        this.$refs.table.refresh(true);
                    }
                });
            },
            async switchStatus(item) {
                const status = item.status == BaseStatusEnum.ENABLE ? BaseStatusEnum.DISABLED : BaseStatusEnum.ENABLE;
                await updateResFileStatus({ id: item.id, status });
                this.$refs.table.refresh(false);
            },

            onSelected(node) {
                if (!node) return;
                this.categoryId = node.id;
                this.$refs.table.refresh(false);
            },

            async saveSortInput(dic, next) {
                const keys = Object.keys(dic);
                for (const key of keys) {
                    await updateResFileSort({
                        id: key,
                        sortNo: dic[key]
                    })
                }
                next();
                this.$refs.table.refresh(false);
            }
        }
    };

    /**
     * 获取文件类型 Opts
     */
    // async function getFileTypeOpts() {
    //     const res = await queryContent('res_file_type');
    //     const arr = res.content.map(i => ({ label: i.dictLabel, value: i.dictValue }));
    //     arr.unshift({ label: '全部', value: 'null' });
    //     return arr;
    // }
</script>